<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test i18n</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <!-- Requesting webcontext.js one level above to workaround the filter on PDI issue (BACKLOG-17885) -->
  <!-- Remove '../' when not needed -->
  <script type="text/javascript" src="../webcontext.js?requireJsOnly=true"></script>

  <script type="text/javascript">
    require(["dojo/request", "dojo/dom", "dojo/on", "dojo/domReady!", "common-ui/util/xss"], function (request, dom, on, xssUtil) {

      var region = dom.byId("region");
      var bundle = dom.byId("bundle");
      var key = dom.byId("key");
      var val = dom.byId("val");
      var bundleDiv = dom.byId("bundleDiv");

      on(dom.byId("fetch"), "click", function () {
        var q = {
          "region": region.value,
          "bundle": bundle.value,
          "key": key.value,
        }

        // Call our custom REST service
        request("/cxf/localize", {query: q}).then(function (data) {
          xssUtil.setHtml(val, key.value + " : " + data);
        }, function (err) {
          xssUtil.setHtml(val, "Error: <br/>" + err);
        }, function (evt) {
        });


        // Call the standard webservice provifed by pentaho-i18n-webservice-bundle
        request("/cxf/i18n/" + region.value + "/" + bundle.value.replace("\/", ".") + "/en").then(function (data) {
          xssUtil.setHtml(bundleDiv, data);
        }, function (err) {
          xssUtil.setHtml(bundleDiv, "Error: <br/>" + err);
        }, function (evt) {
        });


      });
    })
  </script>
</head>
<body>
<div class="container">

  <p class="lead" style="margin-top: 100px;">
    Here's a basic form for calling a custom internationalization service
  </p>
  <form onsubmit="return false;" class="form-inline">
    <div class="input-group">
      <div class="input-group-addon">Region</div>
      <input class="form-control" type="text" id="region" value="test-region"/>
    </div>
    <div class="input-group">
      <div class="input-group-addon">Bundle</div>
      <input class="form-control" type="text" id="bundle" value="i18n/messages"/>
    </div>

    <div class="input-group">
      <div class="input-group-addon">Key</div>
      <input class="form-control" type="text" id="key" value="exampleKey"/>
    </div>

    <button type="submit" class="btn btn-primary" id="fetch">Fetch Translation</button>

    <h2 style="color:red;font-size:24px;text-align:center;width:100%" id="val"></h2>

    <p class="lead" id="bundleDiv"></p>
  </form>
</div>
</body>
</html>
